<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考勤信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/attendcomponents.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../layui/layui.all.js"></script>
</head>
<body>
<div class="container" id="container">
    <div>
        <form id="form" class="form-inline">
            <div class="form-group col-lg-4">
                <div class="layui-input-block">
                    <input type="text" required v-model="example.start" lay-verify="required" placeholder="选择开始时间"
                           name="timePeriod" id="start" class="layui-input">
                </div>
            </div>
            <div class="form-group col-lg-4">
                <div class="layui-input-block">
                    <input type="text" required v-model="example.end" lay-verify="required" placeholder="选择结束时间"
                           name="timePeriod" id="end" class="layui-input">
                </div>
            </div>

            <div class="form-group col-lg-4"></div>
            <div class="form-group col-lg-4"></div>
            <div class="form-group col-lg-4"></div>
            <div class="form-group col-lg-4" align="right">
                <select class="form-control" v-model="example.status" lay-verify="" lay-search>
                    <option value=-1>所有考勤记录</option>
                    <option value="0">正常打卡记录</option>
                    <option value=1>迟到记录</option>
                    <option value="=2">缺勤记录</option>
                </select>

                <input @click="searchData()" value="搜索" class="layui-btn layui-btn-normal" type="button">
            </div>
        </form>
    </div>
    <!--使用分页组件-->
    <page1 :url="url" :example="example" :columns="columns"></page1>
</div>
</body>
<script>
    var _that;
    var laydate;
    var form;
    var data1
    var app = new Vue({
        el: "#container",
        data: {
            example: {
                start: "",
                end: "",
                pageIndex: 1,
                number: 5,
                status: -1,
            },//用于绑定搜索表单
            depts: [],
            message: "--根据状态选择--",
            url: "/attendance/getLates",//定义分页组件内部查询的地址
            admins: [],
            columns: [
                {text: "打卡日期", property: "att_date"},
                {text: "打卡类型", property: "att_type"},
                {text: "打卡时间", property: "att_datetime"},
                {text: "状态", property: "att_status"},
                {text: "员工名字", property: "emp_name"},
                {text: "所在部门", property: "dept_name"},
                {text: "操作", property: "0"},
            ]//定义分页组件内部表格中的列信息
        },
        created: function () {
            _that = this;

        },

        updated: function () {
            form.render();
            laydate.render({
                elem: '#start'
                , type: 'date'
            });
            laydate.render({
                elem: '#end'
                , type: 'date'
            });

        },

        mounted: function () {
            //Layui 时间控件
            layui.use('laydate', function () {
                laydate = layui.laydate;
            });

            layui.use('form', function () {
                form = layui.form;
            });
            form.render();
            laydate.render({
                elem: '#start'
                , type: 'date'
            });
            laydate.render({
                elem: '#end'
                , type: 'date'
            });
            console.log("加载了");
        },

        methods: {
            selectDepts: function () {
                $.ajax({
                    url: "/attendance/getdepts",
                    type: "get",
                    success: function (data) {
                        _that.depts = data.data;
                        console.log(_this.depts);
                    },
                });
            },

            selectAdmins: function () {
                $.ajax({
                    url: "/attendance/getadmins",
                    type: "get",
                    success: function (data) {
                        _that.admins = data.data;
                        console.log(_this.admins);
                    },
                });
            },

            // searchData: function () {
            //     $.ajax({
            //         url: "/getLates",
            //         type: "get",
            //         data: {"timePeriod": _that.example.month, "status": _that.example.status},
            //         success: function (data) {
            //             console.log("牛逼")
            //         },
            //     })
            // }

        }
    });


</script>
</html>